<template>
    <div>
        <el-dialog :visible.sync="value" style="background: rgba(64,158,255, 0.5)" center :show-close="false" top="15vh">
            <el-form ref="form" :model="data" :rules="rules" label-width="80px" label-position="right">
                <el-form-item prop="name" label="角色名称">
                    <el-input minlength="2" maxlength="20" show-word-limit type="text" v-model="data.name" placeholder="请输入角色名称"></el-input>
                </el-form-item>

                <el-form-item prop="description" label="角色描述">
                    <el-input minlength="2" maxlength="20" show-word-limit type="textarea" rows="2" v-model="data.description" placeholder="请输入角色描述"></el-input>
                </el-form-item>

                <el-form-item label="分配权限">
                    <el-alert style="height: 25px;margin-bottom: 5px;" title="如果你勾选或清空了子集,请一并勾选其父类才能做关联" type="info" effect="dark" :closable="false"></el-alert>
                    <Scroll height="250">
                        <el-tree
                                ref="tree"
                                check-strictly
                                show-checkbox
                                :data="tree.treeData"
                                highlight-current
                                icon-class="el-icon-s-flag"
                                :props="tree.defaultProps"
                                check-on-click-node
                                @check-change="treeChange"
                                node-key="id"
                                :default-expanded-keys="tree.expandedKeys"
                                :default-checked-keys="tree.checkedKeys"
                        ></el-tree>
                    </Scroll>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" plain icon="el-icon-plus" @click="handleSubmit" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>

    import { getPermissionList } from "@/api/system/access/permission";
    import { saveOrUpdateRole } from "@/api/system/access/role";

    export default {
        name: "system-role-child",
        data(){
            return {
                value: false,
                fullscreenLoading:false,
                data:{},
                tree:{
                    treeData:[],
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    },
                    expandedKeys:[],
                    checkedKeys:[]
                }
            }
        },
        watch:{
            value(data){
                if(data){
                    getPermissionList({}).then(res=>{
                        this.tree.treeData = res.data.data;
                        let treekeys = [];
                        if(this.data.permissions && this.data.permissions.length > 0){
                            this.data.permissions.forEach(permission=> treekeys.push(permission.id));
                        }
                        this.tree.expandedKeys = treekeys;
                        this.tree.checkedKeys = treekeys;

                    });
                }
            }
        },
        methods:{
            treeChange(){
                this.data.permissionIds = this.$refs.tree.getCheckedKeys();
            },
            handleSubmit(){
                this.$refs['form'].validate(valid=>{
                    if(valid){
                        if(!this.data.permissionIds){
                            this.$message.error("请分配权限");
                            return false;
                        }

                        if(this.data.permissionIds.length == 0){
                            this.$message.error("请分配权限");
                            return false;
                        }
                        this.data.permissionIds = this.data.permissionIds.join(",");
                        this.fullscreenLoading = true;
                        saveOrUpdateRole(this.data).then(res=>{
                            this.fullscreenLoading = false;
                            this.value = false;
                            this.$parent.getRoleList(this.$parent.params);
                        });

                    }else{
                        return false;
                    }
                });
            }
        },
        props:{
            nameRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填',trigger:'blur'}
                    ]
                }
            },
            descriptionRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填',trigger:'blur'}
                    ]
                }
            }
        },
        computed:{
            rules(){
                return {
                    name:this.nameRule,
                    description:this.descriptionRule
                }
            }
        }
    }
</script>

<style scoped>

</style>